<script setup lang="ts">
import { Refresh } from "@element-plus/icons-vue";

const props = defineProps({
  onClick: {
    type: Function as () => void,
    required: false,
  },
  btnName: {
    type: String,
    required: false,
    default: "Refresh",
  },
  loading: {
    type: Boolean,
    required: false,
    default: false,
  },
});
</script>

<template>
  <div class="PyBtn_box">
    <div class="PyBtn_content" v-if="!loading">
      <button class="button" data-text="Awesome" @click="props.onClick">
        <el-icon color="var(--el-color-primary)"><Refresh /></el-icon>
        <span class="actual-text">&nbsp;{{ props.btnName }}&nbsp;</span>
      </button>
    </div>
    <InputLoading1 v-if="loading" />
  </div>
</template>

<style scoped>
.PyBtn_box {
  --PyBtn_olor: rgba(44, 124, 169, 0.7);
  /*rgba(63, 149, 197, 0.6)*/
  position: relative;
  display: flex;
  justify-content: center;
  align-content: center;
  width: 200px;
  height: 50px;
}

.PyBtn_box .PyBtn_content {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  box-shadow: inset 4px 4px 4px rgba(0, 0, 0, 0.05),
    5px 7px 4px rgba(0, 0, 0, 0.05), 5px 6px 6px rgba(0, 0, 0, 0.05),
    inset -4px -4px 5px rgba(126, 134, 140, 0.3); /*rgba(84,94,100,.9)*/
  background: linear-gradient(to right, rgba(126, 134, 140, 0.14), transparent);
}

.PyBtn_box .PyBtn_content {
  transition: 0.5s;
  border-radius: 60%;
}

.PyBtn_box .PyBtn_content:hover {
  border-radius: 20%;
}

.PyBtn_box .PyBtn_content::before {
  content: "";
  position: absolute;
  top: 25%; /*50px*/
  left: 19%; /*85px*/
  width: 5%; /*35px*/
  height: 25%; /*35px*/
  border-radius: 50%;
  background: var(--PyBtn_olor);
  transition: 0.5s;
  transition-delay: 0.1s;
  box-shadow: 0 0 5px var(--PyBtn_olor), 0 0 5px var(--PyBtn_olor),
    0 0 15px var(--PyBtn_olor), 0 0 30px var(--PyBtn_olor);
  opacity: 0.3;
}

.PyBtn_box .PyBtn_content:hover::before {
  width: 0; /*35px*/
  height: 0; /*35px*/
}

/* 按钮 */
.PyBtn_box .PyBtn_content .button {
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  padding: 0;
  border: none;
  cursor: pointer;
}

.PyBtn_box .PyBtn_content .button span {
  text-decoration: none;
  letter-spacing: 1px;
  font-weight: 400;
  color: var(--el-color-primary);
  font-size: 1em;
  z-index: 1;
  transition: 0.5s;
}

.PyBtn_box .PyBtn_content .button:hover span {
  letter-spacing: 3px;
}

.PyBtn_box .PyBtn_content .button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 4px 4px 4px rgba(0, 0, 0, 0.05),
    5px 7px 4px rgba(0, 0, 0, 0.05), 5px 6px 6px rgba(0, 0, 0, 0.05),
    inset -4px -4px 5px rgba(126, 134, 140, 0.3); /*rgba(84,94,100,.9)*/
  border-radius: 20%;
  background-image: radial-gradient(
    circle at center,
    var(--PyBtn_olor) 0%,
    transparent 100%
  );
  opacity: 0;
  transition: border-radius 1s, opacity 1s;
}

.PyBtn_box .PyBtn_content .button:hover::before {
  opacity: 1;
}

.PyBtn_box .PyBtn_content .button:not(:hover)::before {
  border-radius: 60%;
  opacity: 0;
}

/* 左右 向 中间 x轴方向 渐变
.PyBtn_box .PyBtn_content .button::before {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;

  left: -1px;
  top: 0;

  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0.1s;
}

.PyBtn_box .PyBtn_content .button:hover::before {

  left: 0;
  width: 100%;
  border-radius: 20%;
  background: linear-gradient(to right, var(--PyBtn_olor), transparent 50%);
}

.PyBtn_box .PyBtn_content .button::after {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;

  right: -1px;
  top: 0;

  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0.1s;
}

.PyBtn_box .PyBtn_content .button:hover::after {

  right: 0;
  width: 100%;
  border-radius: 20%;
  background: linear-gradient(to left, var(--PyBtn_olor), transparent 50%);
}
*/
</style>
